<template>
  <div class="my-image" :style="`width: ${width};height: ${height}`">
    <el-image v-if="isPreview" :z-index="2001" :src="imgUrl" :preview-src-list="previewSrcList" @click="onClick"/>
    <el-image v-else :z-index="2001" :src="imgUrl"/>
    <slot/>
  </div>
</template>

<script>
  export default {
    props: {
      src: {
        type: String,
        default: ''
      },
      isPreview: {
        type: Boolean,
        default: true
      },
      width: {
        type: String,
        default: '70px'
      },
      height: {
        type: String,
        default: '70px'
      },
      onClick: {
        type: Function,
        default: function() {

        }
      }
    },
    computed: {
      imgUrl() {
        this.src = this.src.trim()
        if (this.src.substr(0, 4) === 'http') {
          return this.src
        } else {
          return process.env.VUE_APP_BASE_IMAGE_URL + this.src
        }
      },
      previewSrcList() {
        if (this.isPreview) {
          return [this.imgUrl]
        } else {
          return null
        }
      }
    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">
  .my-image {
    margin: 0 auto;

    .el-image {
      width: 100%;
      height: 100%;
    }

    img {
      display: block;
    }
  }
</style>
